<template>
  <div class="home-container">
    <header class="hero-section">
      <div class="hero-content">
        <h1>感情解忧站</h1>
        <p>这里是你分享、倾诉和寻找感情答案的温暖港湾</p>
        <div class="hero-buttons">
          <router-link to="/questions" class="btn btn-primary">浏览情感问答</router-link>
          <router-link to="/mbti-test" class="btn btn-secondary">MBTI人格测试</router-link>
          <router-link to="/share" class="btn btn-secondary">分享你的故事</router-link>
        </div>
      </div>
    </header>

    <main class="content-section">
      <section class="features">
        <h2>我们提供</h2>
        <div class="feature-cards">
          <router-link to="/questions" class="card feature-card">
            <div class="card-icon">💬</div>
            <h3>情感问答</h3>
            <p>浏览常见感情问题及专业建议，或提出你的疑惑</p>
          </router-link>
          <router-link to="/mbti-test" class="card feature-card">
            <div class="card-icon">🔍</div>
            <h3>MBTI测试</h3>
            <p>了解你的人格类型，获取个性化情感建议</p>
          </router-link>
          <router-link to="/share" class="card feature-card">
            <div class="card-icon">📝</div>
            <h3>故事分享</h3>
            <p>分享你的情感经历，获得共鸣和支持</p>
          </router-link>
          <router-link to="/stories" class="card feature-card">
            <div class="card-icon">🤝</div>
            <h3>社区支持</h3>
            <p>在温暖的社区中找到理解和鼓励</p>
          </router-link>
        </div>
      </section>

      <!-- MBTI和星座个性化测试区域 -->
      <section class="personalized-test">
        <h2>获取个性化情感建议</h2>
        <div class="test-card">
          <div class="test-form">
            <div class="form-group">
              <label for="mbti">你的MBTI人格类型</label>
              <select id="mbti" v-model="selectedMbti" class="form-control">
                <option value="">请选择MBTI类型</option>
                <option v-for="type in mbtiTypes" :key="type" :value="type">{{ type }}</option>
              </select>
            </div>

            <div class="form-group">
              <label for="zodiac">你的星座</label>
              <select id="zodiac" v-model="selectedZodiac" class="form-control">
                <option value="">请选择星座</option>
                <option v-for="sign in zodiacSigns" :key="sign.name" :value="sign.name">
                  {{ sign.name }} ({{ sign.dateRange }})
                </option>
              </select>
            </div>

            <button 
              @click="generatePersonalizedAdvice" 
              class="btn btn-primary generate-btn"
              :disabled="!selectedMbti || !selectedZodiac"
            >
              生成个性化建议
            </button>
          </div>

          <div class="advice-result" v-if="showAdvice && personalizedAdvice">
            <div class="result-header">
              <h3>为你定制的情感建议</h3>
              <p class="result-meta">{{ selectedMbti }} + {{ selectedZodiac }}</p>
            </div>
            <div class="advice-content">
              <p>{{ personalizedAdvice }}</p>
            </div>
          </div>
        </div>
      </section>

      <section class="latest-advice">
        <h2>精选建议</h2>
        <div class="advice-list">
          <router-link v-for="item in latestAdvice" :key="item.id" :to="`/advice/${item.id}`" class="card advice-item">
            <h3>{{ item.title }}</h3>
            <p>{{ item.summary }}</p>
          </router-link>
        </div>
      </section>
    </main>

    <footer class="footer">
      <p>&copy; 2024 感情解忧站 | 让每一段情感都被温柔对待</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      latestAdvice: [
        {
          id: 1,
          title: '如何处理分手后的痛苦？',
          summary: '走出失恋阴影的5个实用步骤...'
        },
        {
          id: 2,
          title: '恋爱中如何保持个人空间？',
          summary: '亲密关系中的独立与依赖平衡术...'
        },
        {
          id: 3,
          title: '如何判断对方是否真的爱你？',
          summary: '从细节中识别真爱信号...'
        }
      ],
      // MBTI人格类型
      mbtiTypes: [
        'INTJ', 'INTP', 'ENTJ', 'ENTP',
        'INFJ', 'INFP', 'ENFJ', 'ENFP',
        'ISTJ', 'ISFJ', 'ESTJ', 'ESFJ',
        'ISTP', 'ISFP', 'ESTP', 'ESFP'
      ],
      // 星座数据
      zodiacSigns: [
        { name: '水瓶座', dateRange: '1.20-2.18' },
        { name: '双鱼座', dateRange: '2.19-3.20' },
        { name: '白羊座', dateRange: '3.21-4.19' },
        { name: '金牛座', dateRange: '4.20-5.20' },
        { name: '双子座', dateRange: '5.21-6.21' },
        { name: '巨蟹座', dateRange: '6.22-7.22' },
        { name: '狮子座', dateRange: '7.23-8.22' },
        { name: '处女座', dateRange: '8.23-9.22' },
        { name: '天秤座', dateRange: '9.23-10.23' },
        { name: '天蝎座', dateRange: '10.24-11.22' },
        { name: '射手座', dateRange: '11.23-12.21' },
        { name: '摩羯座', dateRange: '12.22-1.19' }
      ],
      // 用户选择
      selectedMbti: '',
      selectedZodiac: '',
      showAdvice: false,
      personalizedAdvice: ''
    }
  },
  methods: {
    // 生成个性化情感建议
    generatePersonalizedAdvice() {
      if (!this.selectedMbti || !this.selectedZodiac) {
        return
      }

      // 基于MBTI和星座生成建议
      const mbtiAdvice = this.getMbtiAdvice(this.selectedMbti)
      const zodiacAdvice = this.getZodiacAdvice(this.selectedZodiac)
      
      // 添加综合建议和实用技巧
      const combinedTips = this.generateCombinedTips(this.selectedMbti, this.selectedZodiac)
      
      // 组合建议
      this.personalizedAdvice = `${mbtiAdvice}\n\n${zodiacAdvice}\n\n=== 综合实用建议 ===\n\n${combinedTips}`
      
      // 显示建议
      this.showAdvice = true
      
      // 保存用户选择 (在实际应用中，这里可以发送到服务器保存)
      this.saveUserInfo()
      
      // 滚动到建议结果
      setTimeout(() => {
        const resultSection = document.querySelector('.advice-result')
        if (resultSection) {
          resultSection.scrollIntoView({ behavior: 'smooth', block: 'start' })
        }
      }, 100)
    },
    
    // 根据MBTI和星座生成综合实用建议
    generateCombinedTips(mbti, zodiac) {
      // 基于MBTI和星座的组合生成更有针对性的建议
      const tips = [
        '每周安排一次30分钟的深度交流时间，专注于分享内心感受和想法，而不仅仅是日常琐事。',
        '尝试共同参与一项新的活动或爱好，这能创造新的共同体验和话题。',
        '学习识别并尊重彼此的情感需求信号，了解什么能让对方感到被爱和被重视。',
        '在冲突发生时，先深呼吸冷静下来，然后用我陈述表达感受，而不是指责对方。',
        '定期回顾关系中的美好时刻，提醒彼此为什么选择了对方。',
        '为对方创造一些小小的惊喜和善意举动，保持关系中的新鲜感和关爱。',
        '共同设定一些短期和长期的关系目标，给关系一个共同的方向和期待。',
        '学习接受并欣赏彼此的差异，将其视为关系中的互补和丰富性来源。'
      ]
      
      // 根据不同的MBTI和星座组合添加更具针对性的建议
      let additionalTips = ''
      
      // 为思考者类型添加情感表达的建议
      if (['INTJ', 'INTP', 'ENTJ', 'ENTP'].includes(mbti)) {
        additionalTips += '记住，在关系中有时为什么不如是什么重要，学会简单地表达关心而不需要复杂的解释。\n'
      }
      
      // 为感受者类型添加自我照顾的建议
      if (['INFJ', 'INFP', 'ENFJ', 'ENFP'].includes(mbti)) {
        additionalTips += '记得定期给自己充电，设定健康的边界，这样你才能更好地照顾和理解伴侣。\n'
      }
      
      // 为判断者类型添加灵活性建议
      if (['INTJ', 'INFJ', 'ENTJ', 'ENFJ', 'ISTJ', 'ISFJ', 'ESTJ', 'ESFJ'].includes(mbti)) {
        additionalTips += '尝试偶尔放下计划和安排，享受一些无预期的、即兴的互动，这能为关系带来新鲜感。\n'
      }
      
      // 为感知者类型添加专注建议
      if (['INTP', 'INFP', 'ENTP', 'ENFP', 'ISTP', 'ISFP', 'ESTP', 'ESFP'].includes(mbti)) {
        additionalTips += '在某些重要的关系时刻，练习给予伴侣你的全部注意力，避免分心或急于转移话题。\n'
      }
      
      // 随机选择4个通用建议
      const shuffledTips = [...tips].sort(() => 0.5 - Math.random())
      const selectedTips = shuffledTips.slice(0, 4).join('\n')
      
      return selectedTips + '\n\n' + additionalTips.trim() + '\n\n最后，请记住，每段关系都是独特的旅程，需要持续的关注和努力。最重要的是保持开放的沟通、真诚的关怀和相互的尊重，这些是任何健康关系的基石。无论你们面临什么挑战，只要携手面对，就能共同成长，创造更深厚、更持久的连接。'
    },
    
    // 获取基于MBTI的建议
    getMbtiAdvice(mbti) {
      const mbtiAdvices = {
        // 分析类
        'INTJ': '作为INTJ，你在感情中往往保持理性分析，但有时可能过于强调逻辑而忽略情感体验。建议在关系中尝试更多地表达内心感受，放下一些完美主义倾向，学会在亲密关系中接受不完美。\n\n你可以尝试每天花5分钟时间与伴侣分享一个你的想法或感受，而不仅仅是讨论事实和解决方案。同时，也要给自己和伴侣足够的独处时间，因为你需要空间来处理自己的思绪。记住，情感连接和逻辑理解同样重要，平衡两者才能建立健康持久的关系。',
        'INTP': 'INTP通常喜欢探索概念和想法，但在情感表达上可能有些迟钝。试着更加关注伴侣的情感需求，学会用具体行动表达关心，而不仅仅是分享你的思想世界。\n\n你可以尝试记录伴侣的情绪变化和触发因素，这既能满足你分析的倾向，又能帮助你更好地理解他们。同时，练习一些简单的情感词汇来表达你的感受，而不是总是用抽象概念。记住，亲密关系需要实际的投入和关注，而不仅仅是智力上的契合。',
        'ENTJ': 'ENTJ在关系中往往表现出领导力，但可能过于直接或控制欲强。记住在亲密关系中，协作比主导更重要，学会倾听和尊重伴侣的想法，即使它们与你不同。\n\n尝试在某些决定上完全听从伴侣的安排，这不仅能减轻你的压力，也能让伴侣感受到被重视和信任。同时，定期安排不带目的的轻松时光，避免把每一次互动都变成任务或计划。记住，关系的健康发展需要平衡控制与放手，学会欣赏伴侣带来的不同视角。',
        'ENTP': 'ENTP充满创意和好奇心，但可能会因为追求刺激而忽视关系的稳定性。尝试培养更多的耐心和承诺感，在关系中保持一些仪式感和常规，给予伴侣足够的安全感。\n\n你可以为关系创造一些有趣但可预期的传统，比如每周固定的约会之夜或共同爱好时间。同时，学会在表达观点时更加考虑伴侣的感受，而不是仅仅为了辩论而辩论。记住，关系的深度来自于持续的投入和关注，而不仅仅是新鲜刺激的体验。',
        
        // 理想主义者类
        'INFJ': '作为INFJ，你对情感连接的深度有很高期待，但可能会过度付出或忽视自己的需求。记得在关系中保持平衡，学会设定健康边界，不要为了满足伴侣而牺牲自己的核心价值。\n\n你可以尝试每天进行15分钟的自我反思和照顾，确保自己的情感需求得到满足。同时，与伴侣建立定期的深度对话时间，分享彼此的内心世界和价值观。记住，健康的关系应该增强而不是消耗你的精神能量，保持自我完整性是建立真实连接的基础。',
        'INFP': 'INFP注重个人价值观和真实性，但在冲突面前可能倾向于逃避。练习以建设性方式表达分歧，记住健康的关系需要诚实的沟通，即使有时会带来短暂的不适。\n\n你可以尝试学习非暴力沟通技巧，用"我"开头表达感受而不是指责对方。同时，也要尊重伴侣的观点和感受，即使它们与你的价值观有所不同。记住，冲突并不意味着关系出现问题，而是成长和加深理解的机会。',
        'ENFJ': 'ENFJ善于理解他人情感，但可能会过度关注他人需求而忽略自己。学会在照顾他人的同时也照顾好自己，找到能让你个人成长的空间和活动。\n\n你可以设定明确的个人时间和空间，用于发展自己的兴趣和充电。同时，学会向伴侣坦诚地表达你的需求和感受，而不仅仅是倾听他们的。记住，只有当你照顾好自己，才能更好地照顾和理解他人，这是建立互惠关系的关键。',
        'ENFP': 'ENFP充满热情和理想主义，但在长期关系中可能会感到厌倦。试着在稳定中寻找新鲜感，将你的创造力带入日常生活，同时培养对伴侣持续的欣赏和感激之心。\n\n你可以定期为关系注入新的元素，比如尝试新的活动或探索新的话题，但也要学会欣赏平凡中的美好。每天花一点时间记录伴侣的优点和让你感激的事情，这能帮助你保持积极的视角。记住，持久的关系需要既有激情又有稳定，平衡两者才能创造真正的幸福。',
        
        // 守护者类
        'ISTJ': 'ISTJ可靠且重视传统，但可能在情感表达上较为保守。尝试用新的方式表达你的关心和爱意，偶尔打破常规，为关系注入一些惊喜和变化。\n\n你可以尝试一些小而具体的浪漫举动，比如准备伴侣喜欢的餐点或安排一次意外的约会。同时，也可以尝试更直接地表达你的感受，而不仅仅是通过行动来证明。记住，情感表达的多样性能让关系更加丰富多彩，不要害怕偶尔走出你的舒适区。',
        'ISFJ': 'ISFJ体贴周到，但有时可能过度牺牲自己的需求。学会认识并表达自己的感受和需求，记住健康的关系需要双方的付出和回报。\n\n你可以尝试更清晰地表达"我需要"而不仅仅是"我可以为你做"，这能帮助伴侣更好地了解如何支持你。同时，也要学会接受伴侣的帮助和关怀，不要总是扮演照顾者的角色。记住，真正的亲密来自于相互依赖而不是单方面的付出，给自己空间接受爱同样重要。',
        'ESTJ': 'ESTJ注重秩序和效率，但在关系中可能过于严肃或实际。尝试放松对规则的坚持，学会在适当的时候放下控制，享受关系中的随性和乐趣。\n\n你可以安排一些不需要计划的休闲时间，比如即兴散步或随意聊天。同时，也可以尝试更感性地表达你的情感，而不仅仅是通过实际行动。记住，关系中的一些混乱和不确定性有时是好事，它们能带来新鲜感和情感连接，而不仅仅是效率和秩序。',
        'ESFJ': 'ESFJ善于照顾他人，但可能会因为过度关注他人而忽略自己。保持一些属于自己的时间和活动，培养个人兴趣，这会让你在关系中更有活力。\n\n你可以设定每周固定的个人时间，用于追求自己的兴趣爱好或单纯休息。同时，也要教导伴侣如何更好地理解和满足你的需求，而不是总是猜测。记住，照顾好自己不仅对你有益，也会让你在关系中更加真实和有活力，这对双方都是一种礼物。',
        
        // 探险家类
        'ISTP': 'ISTP独立自主，但可能在情感深度上有所保留。试着更多地分享你的内心世界和长期想法，建立更深层次的情感连接，而不仅仅停留在表面互动。\n\n你可以尝试定期与伴侣进行深度交流，分享你的价值观和人生目标。同时，也要学会在伴侣需要情感支持时给予更多的陪伴和安慰，而不仅仅是解决方案。记住，情感的深度和独立性并不矛盾，真正的亲密来自于在保持自我的同时也能与他人建立深层连接。',
        'ISFP': 'ISFP注重个人体验和和谐，但可能难以表达强烈情感。练习更直接地表达你的感受和想法，不要害怕展现真实的自我，包括不完美的部分。\n\n你可以尝试用创意的方式表达情感，比如通过艺术、音乐或写作，这既符合你的本性，又能帮助伴侣更好地理解你。同时，也要学会在必要时表达不同意见，不要总是为了和谐而妥协。记住，真实的关系需要接受彼此的全部，包括那些可能引起不适的部分，只有这样才能建立真正的信任。',
        'ESTP': 'ESTP喜欢行动和刺激，但可能在关系中缺乏耐心或深度。试着在享受当下的同时，也为关系设定一些长远目标，培养对伴侣持续的兴趣和关注。\n\n你可以与伴侣一起设定共同的目标和计划，这能增加关系的深度和方向感。同时，也要学会在倾听伴侣说话时给予更多的注意力，而不是急于行动或转移话题。记住，持久的关系需要既有当下的激情，也有未来的共同愿景，平衡两者才能创造真正的满足感。',
        'ESFP': 'ESFP充满活力和魅力，但可能会因为追求即时满足而忽视关系的长期健康。学会在享受社交活动的同时，也创造安静、亲密的相处时光，建立更深的情感连接。\n\n你可以尝试定期安排只有你和伴侣的安静时光，比如在家中共进晚餐或观看电影。同时，也要学会在做决定时考虑长期影响，而不仅仅是当下的快乐。记住，关系的健康需要平衡社交互动和私人连接，以及即时满足和长期承诺，这样才能建立真正的持久性和满足感。'
      }
      
      return mbtiAdvices[mbti] || '根据你的MBTI类型，我们建议你在关系中保持真实的自我，同时保持开放的心态，尝试理解和接受伴侣的不同之处。记住，每段关系都是独特的，需要双方共同努力和适应。定期的沟通、互相尊重和适当的妥协是任何健康关系的基础。无论你的性格类型如何，保持真诚、同理心和耐心都是建立深刻连接的关键。'
    },
    
    // 获取基于星座的建议
    getZodiacAdvice(zodiac) {
      const zodiacAdvices = {
        '水瓶座': '作为水瓶座，你独立且重视个人空间，这在关系中是宝贵的品质。不过，尝试让伴侣更多地了解你的内心世界，分享你的创新想法和理想，同时尊重彼此的独立性。\n\n你的前瞻性思维和人道主义精神是关系中的亮点，试着将这些特质融入到与伴侣的互动中。同时，也要学会在保持独立的同时培养情感连接，比如定期分享你的想法和感受，即使它们看起来不切实际。记住，亲密并不意味着要完全融合，而是在保持自我的同时建立情感连接，这对你来说尤其重要。你的伴侣会欣赏你的独特视角，但也需要感到被理解和重视。',
        '双鱼座': '双鱼座情感丰富且富有同理心，但可能会在关系中迷失自我。记住在关心伴侣的同时也照顾好自己，设定健康的边界，避免过度牺牲。\n\n你的直觉是你的优势，但也要学会用理性思考来平衡情感，这样才能建立更健康、更持久的关系。试着每天花一点时间进行自我反思，确认自己的感受和需求，而不是仅仅反映伴侣的情绪。你的创造力和想象力是关系中的宝贵资产，用它们来创造浪漫和惊喜，但也要确保你的付出是互惠的。记住，只有当你照顾好自己，才能真正照顾和理解他人。',
        '白羊座': '白羊座热情直接，但有时可能过于冲动或自我中心。在关系中，尝试更多地倾听伴侣的想法和感受，学会在表达自己需求的同时也考虑对方。\n\n你的行动力和勇气是关系中的驱动力，但也要学会偶尔放慢脚步，享受相处的过程，而不仅仅关注目标和结果。试着在做决定前先征询伴侣的意见，这不仅能改善关系，也能获得不同的视角。记住，真正的力量来自于知道何时前进，何时暂停，何时倾听。你的热情是感染力的，但也要注意不要让它掩盖了伴侣的声音。',
        '金牛座': '金牛座稳定可靠，但可能会过于固执或不愿改变。在关系中，保持你的忠诚和承诺，同时也要保持开放的心态，接受必要的变化和成长。\n\n你的感官享受能力是美好的，但也要记得情感和精神层面的连接同样重要。尝试定期与伴侣进行深度交流，分享内心感受和想法，而不仅仅是共同享受物质生活。在面对变化时，给自己和伴侣一些适应的时间，但也要认识到适度的变化对关系的健康发展是有益的。记住，稳定性是你的优势，但过度坚持不变可能会限制关系的成长潜力。',
        '双子座': '双子座机智灵活，但可能会在关系中表现出不稳定性或注意力分散。尝试培养更多的专注和深度，在众多兴趣中为伴侣留出特殊的位置。\n\n你的沟通能力是优势，用它来建立真诚的交流，而不仅仅是表面的闲聊。设定特定的时间与伴侣进行深度对话，专注于情感连接而不是信息交换。记住，你的多变性和好奇心使关系充满活力，但也要学会在某些方面保持一致性和承诺，这对建立信任至关重要。伴侣欣赏你的智慧和幽默感，但也需要感到在你众多兴趣中占据特殊地位。',
        '巨蟹座': '巨蟹座温柔体贴，但可能会因为过度保护或敏感而产生情绪波动。在关系中，你的关怀和照顾是宝贵的，但也要学会适度放松控制，给予伴侣空间。\n\n创造一个温暖舒适的家环境是你的天赋，但也要允许这个空间里有不同的声音和想法。试着不要将伴侣的每个情绪变化都视为对你的反应，给彼此一些独处的时间和空间。记住，健康的关系需要平衡保护和信任，允许彼此都有成长的空间。你的情感深度是关系的财富，但也要学会用理性和客观来平衡你的敏感性。',
        '狮子座': '狮子座自信热情，但有时可能会过于自我中心或需要关注。在关系中，你的慷慨和保护欲是宝贵的品质，但也要学会真正地倾听和欣赏伴侣的独特之处。\n\n试着将聚光灯偶尔转向伴侣，认可他们的成就和价值，这会让关系更加平衡和和谐。学会接受建设性的反馈，将其视为成长的机会而不是批评。记住，真正的力量来自于互相尊重和支持，而不仅仅是主导或控制。你的热情和领导力可以为关系带来方向和活力，但也要给伴侣表达自己的空间和机会。',
        '处女座': '处女座注重细节和实用性，但可能会过于挑剔或完美主义。在关系中，你的组织能力和关怀是宝贵的，但也要学会接受不完美，包括自己和伴侣的缺点。\n\n尝试偶尔放下分析和计划，单纯享受当下的相处时光，不要总是想着如何改进或优化。每天记录伴侣的一个优点或让你感激的事情，这能帮助你培养更积极的视角。记住，完美是不存在的，但成长和进步是可能的。你的实用主义和关怀是关系中的稳定力量，但也要学会在某些时候放下控制，享受生活的不确定性和不完美。',
        '天秤座': '天秤座追求和谐与平衡，但有时可能会因为害怕冲突而难以表达真实想法。在关系中，你的外交手腕和公平感是优势，但也要学会在必要时表达不同意见。\n\n尝试用建设性的方式表达分歧，将其视为加深理解的机会而不是和谐的威胁。记住，真正的和谐来自于诚实的沟通，而不是回避问题或过度妥协。你的审美和品味能为关系增添美感，但也要尊重伴侣的独特风格和偏好。在做决定时，努力找到真正的平衡，而不是简单地折中，这样的决定会让双方都感到被尊重和满足。',
        '天蝎座': '天蝎座深沉热情，但可能会表现出强烈的占有欲或嫉妒心。在关系中，你的忠诚度和深度是宝贵的，但也要学会信任和放手。\n\n试着将你的洞察力用于理解伴侣的内心世界，而不是监控他们的行为。学会分享你的情感深度，但也要尊重伴侣可能有不同的表达方式。记住，健康的关系建立在相互尊重和信任的基础上，而不是控制或监视。你的热情和专注是关系中的强大力量，但也要给伴侣足够的自由和空间，这样的关系会更加健康和持久。',
        '射手座': '射手座热爱自由和冒险，但可能会在长期关系中感到束缚。在关系中，保持你的好奇心和乐观精神，同时也要培养责任感和承诺感。\n\n寻找能与你一起成长和探索的伴侣，而不是试图改变彼此的本质。设定一些共同的目标和冒险，同时也尊重彼此的个人空间和兴趣。记住，真正的自由不是不受约束，而是在承诺中找到成长和表达的空间。你的幽默感和热情能为关系带来活力，但也要学会在某些时候安定下来，享受稳定和深度带来的满足感。',
        '摩羯座': '摩羯座务实可靠，但可能会过于严肃或事业导向。在关系中，你的稳定和责任感是宝贵的，但也要学会放松和享受生活。\n\n记得，工作和成就固然重要，但人际关系和情感连接才是生活中最珍贵的财富。尝试安排更多的休闲时间，不要总是将关系视为需要管理的项目。学会表达你的情感，即使这对你来说不那么自然，你的伴侣会感激你的努力。记住，平衡工作和生活，以及责任和乐趣，是创造真正满足感的关键。你的长期规划能力是关系中的优势，但也要学会享受当下的美好时刻。'
      }
      
      return zodiacAdvices[zodiac] || '根据你的星座特点，我们建议你在关系中发挥自己的自然优势，同时注意平衡自己的倾向，为伴侣创造理解和成长的空间。记住，星座可以提供一些一般性的指导，但每个人都是独特的个体，需要根据具体情况灵活调整。最重要的是保持开放的心态，愿意学习和成长，以及真诚地关心和尊重你的伴侣。'
    },
    
    // 保存用户信息 (模拟)
    saveUserInfo() {
      // 在实际应用中，这里可以发送AJAX请求到服务器保存用户信息
      console.log('用户信息:', { mbti: this.selectedMbti, zodiac: this.selectedZodiac })
    }
  }
}
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.hero-section {
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  padding: 6rem 2rem;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

.hero-section h1 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.hero-section p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: #fff;
  color: #ff9a9e;
}

.btn-primary:hover {
  background-color: #f8f9fa;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
  background-color: transparent;
  color: #fff;
  border: 2px solid #fff;
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.content-section {
  flex: 1;
  padding: 2rem;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.features {
  text-align: center;
  margin-bottom: 3rem;
}

.features h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #333;
}

.feature-cards {
  display: flex;
  gap: 2rem;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
}

.feature-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 2rem;
  flex: 1;
  min-width: 280px;
  max-width: calc(33.333% - 2rem);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
  text-decoration: none;
  color: inherit;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.card-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #333;
  transition: color 0.3s ease;
}

.card p {
  color: #666;
}

/* 个性化测试区域样式 */
.personalized-test {
  text-align: center;
  margin: 3rem 0;
}

.personalized-test h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #333;
}

.test-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  max-width: 800px;
  margin: 0 auto;
}

.test-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.form-group label {
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #333;
}

.form-control {
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-control:focus {
  outline: none;
  border-color: #ff9a9e;
  box-shadow: 0 0 0 2px rgba(255, 154, 158, 0.1);
}

.generate-btn {
  margin-top: 0.5rem;
  align-self: flex-start;
}

.generate-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  transform: none;
}

.generate-btn:disabled:hover {
  transform: none;
  box-shadow: none;
}

.advice-result {
  text-align: left;
  background-color: #fff9f8;
  border-radius: 10px;
  padding: 1.5rem;
  border-left: 4px solid #ff9a9e;
  margin-top: 1.5rem;
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.result-header {
  margin-bottom: 1rem;
}

.result-header h3 {
  margin: 0 0 0.5rem 0;
  color: #ff9a9e;
}

.result-meta {
  color: #666;
  font-size: 0.9rem;
  margin: 0;
}

.advice-content {
  line-height: 1.8;
  color: #444;
  white-space: pre-line;
}

.latest-advice {
  text-align: center;
  width: 100%;
}

.latest-advice h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #333;
}

.advice-list {
  display: flex;
  gap: 2rem;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
}

.advice-item {
  background-color: #fff;
  border-radius: 10px;
  padding: 1.5rem;
  flex: 1;
  min-width: 280px;
  max-width: calc(33.333% - 2rem);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  text-align: left;
  transition: transform 0.3s ease;
  text-decoration: none;
  color: inherit;
}

.advice-item:hover {
  transform: translateY(-5px);
}

.advice-item:hover h3 {
  color: #ff9a9e;
}

.feature-card {
  text-decoration: none;
  color: inherit;
  display: block;
}

.feature-card:hover h3 {
  color: #ff9a9e;
  transition: color 0.3s ease;
}

.footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1.5rem;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .hero-section h1 {
    font-size: 2.5rem;
  }
  
  .feature-cards,
  .advice-list {
    flex-direction: column;
    align-items: center;
  }
  
  .feature-card,
  .advice-item {
    width: 100%;
    max-width: 400px;
  }
  
  .content-section {
    padding: 1rem;
  }
  
  .test-card {
    padding: 1.5rem;
  }
  
  .generate-btn {
    align-self: stretch;
  }
}
</style>